<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/code.js"></script>
  <script src="../js/cookie.js"></script>
  <style>
    #createCode {
      user-select: none;
    }

    .right {
      font-size: 12px;
      color: green;
    }

    .err {
      font-size: 12px;
      color: red;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>
      <label for="">用户名:</label>
      <input type="text" id="user">
      <span id="user_span"></span>
    </p>
    <p>
      <label for="">密&emsp;码:</label>
      <input type="password" id="pwd">
      <span id="pwd_span"></span>
    </p>
    <p>
      <input id="loginBtn" type="submit" value="登录">
      <input id="retBtn" type="reset" value="取消">
    </p>
  </div>
</body>
<script>
      // 用户名
    // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头

    // 判断的流程  从易到难的顺序 
    // a. 长度  6-12位 
    // b. 不能以数字开头
    // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)


    // 密码
    // 由数字 大小写字母 _    6-12位 

    // 判断密码强度
    // 数字,大写,小写,特殊字符  中 只出现一种   11111   aaaaaa  AAAAAA   弱
    // 数字,大写,小写,特殊字符  中 出现2种      11111  A1111   aAAAAA   中
    // 数字,大写,小写,特殊字符  中 出现3种      1aA                      强
    // 数字,大写,小写,特殊字符  中 出现4种      1aA_                     超强

    // 是否存在数字  / 大写 /小写 / 特殊字符

    // true + true + true + false  => 3 

    // 确认密码  
    // 和密码相同  

    // 验证码  => 封装一个方法可以随机生成四位验证码 (0-9 a-z A-Z )
    // 1. 页面加载时,随机生成四个不重复的验证码 (0-9 a-z A-Z )   => createCode
    // 2. 点击 验证码 进行切换
    // 3. 验证码输入判断  (输入的  随机生成的  保持一致) 
</script>
<script>
  var userInp = document.getElementById("user");
  var pwdInp = document.getElementById("pwd");
  var loginBtn = document.getElementById("loginBtn");

  loginBtn.onclick = function () {
    // 用户输入的
    var user = userInp.value;
    var pwd = pwdInp.value;

    if (user && pwd) {
      var realUser = getCookie("user");
      var realPwd = getCookie("pwd");
      if (user == realUser) {
        if (pwd === realPwd) {
          // alert("登录成功");
          setCookie("lgc", user, 7);   //标识用户身份
          location.href = "index.html";
        } else {
          alert("用户名或密码有误!");
        }
      } else {
        alert("该用户不存在!");
      }
    } else {
      alert("请输入完整信息");
    }



  }





</script>


</html>